Vue.component('h-form-table', {
  props: {
    data: {
      type: Array,
      required: true
    },
    sum: {
      default: 0
    },
    columns: {
      type: Array,
      required: true
    },
    rowKey: {
      type: String,
      required: true
    },
    itemField: {
      type: Array
    },
    sumField: {
      type: Array
    },
    expression: {
      type: Array
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  template: `
    <q-table
      class="no-shadow"
      :data="cData"
      dense
      separator="cell"
      :columns="columns"
      :loading="listLoading"
      :rows-per-page-options="[0]"
      :pagination.sync="pagination"
      selection="multiple"
      :selected.sync="selected"
      hide-bottom
      :row-key="rowKey"
    >
      <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
        <q-pagination
          v-model.trim="pagination.page"></q-pagination>
      </div>
      <template slot="top-left" slot-scope="props">
        <q-btn
          color="primary"
          outline
          size="xs"
          label="新增"
          @click="addRow"
          class="q-mr-sm" ></q-btn>
        <q-btn
          color="negative"
          outline
          size="xs"
          label="删除"
          @click="delRows()"
          class="q-mr-sm" ></q-btn>
      </template>
      <template slot="body" slot-scope="props">
        <q-tr
          :props="props"
        >
          <q-td >
            <q-checkbox color="primary" v-model.trim="props.selected"></q-checkbox>
          </q-td>
          <q-td v-for="(item,index) in columns" :key="item.name" :props="props">
            <div v-if="index == 0">
              <q-btn
                flat
                size="xs"
                color="primary"
                class="q-pa-xs"
                @click="delRows(props.row.id)"
              >
                删除
              </q-btn>
            </div>
            <q-input :readonly="readonly" align="center" v-else v-model.trim="props.row[item.name]" hide-underline style="min-width: 80px"></q-input>
          </q-td>
        </q-tr>
      </template>
      <q-tr slot="bottom-row" slot-scope="props">
        <q-td colspan="100%" class="text-left">
          <div class="q-pa-sm">
            <strong>小计：</strong>{{sum}}
          </div>
        </q-td>
      </q-tr>
    </q-table>
  `,
  data: function() {
    return {
      cData: this.data,

      listLoading: false,
      selected: [],
      rowId: 10000001,
      pagination: {
        page: 1,
        rowsPerPage: 0
      },
      colSum: 0
    }
  },
  watch: {
    cData: {
      handler: function(newV) {
        var that = this, colSum = []
        newV.forEach(function(c, i) {
          if (that.itemField && that.itemField.length>0) {
            that.itemField.forEach(function(f, index) {
              // 处理 行计算
              // 表达式 1
              if (that.expression[index] === 1) { // A * B * C
                // 参与计算项未填写完整时  不显示计算结果 
                if (c[f.ite1] === '' || c[f.ite2] === '' || c[f.ite3] === '') {
                  c[that.sumField[index]] = ''
                } else {
                  c[that.sumField[index]] = c[f.ite1]*c[f.ite2]*c[f.ite3]
                }
              }
              if (that.expression[index] === 2) {  // (A + B) * C / (D * E)
                if (c[f.ite1] === '' || c[f.ite2] === '' || c[f.ite3] === '' || c[f.ite4] === '' || c[f.ite5] === '') {
                  c[that.sumField[index]] = ''
                } else {
                  c[that.sumField[index]] = (parseFloat(c[f.ite1])+parseFloat(c[f.ite2]))*c[f.ite3]/c[f.ite4]/c[f.ite5]
                }
              }
              if (that.expression[index] === 3) { // A * B * C / (D * E)
                if (c[f.ite1] === '' || c[f.ite2] === '' || c[f.ite3] === '' || c[f.ite4] === '' || c[f.ite5] === '') {
                  c[that.sumField[index]] = ''
                } else {
                  c[that.sumField[index]] = c[f.ite1]*c[f.ite2]*c[f.ite3]/c[f.ite4]/c[f.ite5]
                }
              }
              if (that.expression[index] === 4) { // A + B
                if (c[f.ite1] === '' || c[f.ite2] === '') {
                  c[that.sumField[index]] = ''
                } else {
                  c[that.sumField[index]] = parseFloat(c[f.ite1])+parseFloat(c[f.ite2])
                }
              }
              // 处理 列计算
              if (colSum[index] == undefined) {
                colSum[index] = 0
              }
              colSum[index] += c[that.sumField[index]]*1
              
            })
          }
        })
        this.colSum = colSum[colSum.length-1]
        this.$emit('change', newV, this.colSum)
      },
      deep: true
    }
  },
  computed: {
    
  },
  methods: {
    addRow: function() {
      if (this.cData.length > 100) {
        return 
      }
      var obj = {}
      this.columns.forEach(function(c, i) {
        if (i > 1) {
          obj[c.name] = ''
        }
      })
      obj.id = this.rowId++
      this.cData.push(obj)
    },
    delRows: function(id) {
      var that = this, _arr = [], _sArr = []
      // 单条删除
      if (id) {
        this.$q.dialog({
          title: '确认',
          message: '确认删除当前数据吗？',
          ok: {
            label: '确认',
            flat: true
          },
          cancel: {
            label: '取消',
            flat: true
          }
        })
        .then(function() {
          that.cData.forEach(function(item) {
            if (item.id === id) {
              return 
            }
            _arr.push(item)
          })
          that.selected.forEach(function(item) {
            if (item.id === id) {
              return 
            }
            _sArr.push(item)
          })
          that.cData = _arr
          that.selected = _sArr
        })
        .catch(function() {

        })
      } else if(this.selected.length>0) {
        this.$q.dialog({
          title: '确认',
          message: '确认删除当前勾选的'+ this.selected.length +'数据吗？',
          ok: {
            label: '确认',
            flat: true
          },
          cancel: {
            label: '取消',
            flat: true
          }
        })
        .then(function() {
          that.selected.forEach(function(row) {
            _arr = removeArray(that.cData, row)
          })
          that.selected = []
          that.cData = _arr
        })
        .catch(function() {

        })
      } else {
        this.$q.notify({
          message:'请先选择，再执行该操作',
          type: 'warning',
          icon: 'warning',
          timeout: 2000,
          position: 'top-right'
        })
      }
    }
  }
})